<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>店铺历史信息</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="app">
    <el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新</el-button>
    <!--表格数据  : 相当于v-bind: -->
    <el-table
            :data="tableData"
            style="width: 100%">
        <!--表格的列   prop 组件   父作用域向子作用域传值-->
        <el-table-column
                prop="storesName"
                label="店铺名称"
                width="130">
        </el-table-column>
        <el-table-column
                prop="storesAddress"
                label="店铺地址"
                width="130">
        </el-table-column>
        <el-table-column
                prop="headPhone"
                label="店铺电话"
                width="160">
        </el-table-column>
        <el-table-column
                prop="closeDate"
                label="关店日期"
                :formatter="changeMonth"
                width="160">
        </el-table-column>

        <el-table-column
                prop="status"
                label="状态"
                :formatter="getStatus"
                width="130">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleUpdate(scope.$index, scope.row)">重新营业</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>

<script>
    var app =new Vue({
        el: "#app",
        data: function () {
            return {
                tableData: [],
            }
        },
        created: function () { //初始化方法 类似于jquery  $({})
            this.loadData();
        },
        methods: {
            loadData() {
                //让_this等于当前vue对象
                var _this = this;
                //赋值 axios官网代码
                axios.post('/stores/storesCloseQueryByParam')  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        console.log(response);
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if (response.data.code == 200) {
                            _this.tableData = response.data.data;
                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
            },
            //刷新页面
            refresh() {
                location.reload();
            },
            //获取分店状态  把状态数字，转换为字符
            getStatus(row, column, cellValue, index) {
                return cellValue == 1 ? "开业" : "停业";
            },
            //营业
            handleUpdate(index, row) {
                console.log(index, row);
                //确认框提示
                this.$confirm('确定该店铺将重新营业, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;
                    axios.post("/stores/ShopCloseUpdate", row)  //指定请求的url及参数  get
                        .then(function (response) {  //正确返回对象的处理
                            // handle success
                            console.log(response);
                            //JSON.stringify   把json转换为json字符串，方便查看
                            console.log(JSON.stringify(response));
                            //直接使用this 会指 axios对象  错误
                            // this.tableData
                            //判断返回值是否正确
                            if (response.data.code == 200) {
                                //提示添加成功
                                _this.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            } else {
                                //错误提示信息
                                _this.$message.error('错了哦，这是一条错误消息');
                            }

                        })
                        .catch(function (error) {//错误的处理
                            // handle error
                            console.log(error);
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重新营业'
                    });
                });
            },
        }
    })
</script>
</body>
</html>